<template>
    <dv-border-box7 :color="['#0D3568', '#49ACD6']" backgroundColor="" style="margin-top: 15px;">
        <div class="platewrapper">
            <headline title="男女比例分析"></headline>
            <div class="cont-wrapper">
                <div class="sex-content">
                    <div class="sexbi_bg"></div>
                    <div class="sex_data">
                        <div class="sex_data_male">
                            <ul>
                                <li v-for="(item, index) in manCountList" :key="index" :style="{ color: item.color }">{{ item.count }}</li>
                            </ul>
                        </div>
                        <div class="sex_data_percent">
                            <ul>
                                <li v-for="(item, index) in RateList" :key="index" :style="{ color: item.color }">[{{ item.rate }}%]</li>
                            </ul>
                        </div>
                        <div class="sex_data_female">
                            <ul>
                                <li v-for="(item, index) in womanCountList" :key="index" :style="{ color: item.color }">{{ item.count }}</li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="sex_legend">
                    <a-space :size="[10, 6]" wrap>
                        <template v-for="(item, index) in legendList" :key="index">
                            <div class="lengend_item">
                                <i class="legend" :style="{ 'background-color': item.color }"></i>
                                <span class="text">{{ item.label }}</span>
                            </div>
                        </template>
                    </a-space>
                </div>
            </div>
        </div>
    </dv-border-box7>
</template>

<script setup lang="ts">

const paramState = reactive<Recordable>({});

const colorList = ['#FFC66D', '#1BE9FB', '#C7C0F4', '#FE6460'];

const manCountList = ref<Recordable[]>([]);
const womanCountList = ref<Recordable[]>([]);
const RateList = ref<Recordable[]>([]);
const legendList = ref<Recordable[]>([]);

onMounted(() => {
    const data = [
        { label: '0-6岁', manCount: 30, womanCount: 40, manRate: 0.3, womanRate: 0.4 },
        { label: '7-18岁', manCount: 25, womanCount: 120, manRate: 0.2, womanRate: 0.7 },
        { label: '19-59岁', manCount: 142, womanCount: 89, manRate: 0.6, womanRate: 0.4 },
        { label: '60岁以上', manCount: 45, womanCount: 0, manRate: 0.3, womanRate: 0 },
    ];
    manCountList.value = data.map((item:Recordable, index:number) => ({ color: colorList[index], count: item.manCount }))
    womanCountList.value = data.map((item:Recordable, index:number) => ({ color: colorList[index], count: item.womanCount }))
    RateList.value = data.map((item:Recordable, index:number) => ({ color: colorList[index], rate: parseFloat((item.manRate + item.womanRate).toFixed(2)) }))
    legendList.value = data.map((item:Recordable, index:number) => ({ label: item.label, color: colorList[index] }))
});
</script>
<style lang="less" scoped>
.sex-content {
    margin-top: 5px;
    width: 100%;
    display: flex;
    justify-content: center;
    position: relative;
    .sexbi_bg {
        width: 260px;
        height: 145px;
        background-image: url('@/assets/image/nvbi_bg.png');
        background-repeat: no-repeat;
        background-size: cover;
    }
    .sex_data {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-left: 10px;
        padding-right: 12px;
        box-sizing: border-box;

        .sex_data_male, .sex_data_percent, .sex_data_female {
            ul, li {
                list-style: none;
                list-style-type: none;
                margin: 0;
                padding: 0;
                font-size: 12px;
                font-family: 'AZ';
                
            }
        }
        .sex_data_male{
            margin-top: 20px;
            li {
                min-width: 80px;
                text-align: right;
                font-size: 17px;
                line-height: 1.6;
            }
        }
        .sex_data_female {
            margin-top: 20px;
            li {
                min-width: 80px;
                font-size: 17px;
                line-height: 1.6;
            }
        }
        .sex_data_percent {
            margin-top: 20px;
            margin-right: 12px;
            li {
                min-width: 50px;
                line-height: 2.3;
            }
        }
    }
}
.sex_legend {
    color: #fff;
    margin-top: 5px;
    width: 100%;
    height: 20px;
    display: flex;
    justify-content: center;
    .lengend_item {
        margin-right: 10px;
        i {
            display: inline-block;
            width: 13px;
            height: 8px;
        }
        span {
            display: inline-block;
            padding-left: 4px;
        }
    }
}
</style>